<template>
  <v-container fluid fill-height class="statistics-wrapper">
    <v-layout row wrap>
      <v-flex md12>
        <v-layout row wrap>
          <v-flex md4 sm1 class="px-2 mb-2" @click="daily">
            <v-card color="white" class="cursor">
              <v-card-title class="title card-title-bg" :class="{'card-title-selected white--text': toggleCard === 1}">
                <v-icon>today</v-icon>
                <span class="mx-2">日统计</span>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="subheading">
                <v-layout md12 wrap row class="left-border-green">
                  <v-flex md6>今日充值: {{topupRecord.today}} 元</v-flex>
                  <v-flex md6>昨日充值: {{topupRecord.yesterday}} 元</v-flex>
                  <v-flex md6>今日消费: {{consumeData.today}} 元</v-flex>
                  <v-flex md6>昨日消费: {{consumeData.yesterday}} 元</v-flex>
                </v-layout>
              </v-card-text>
            </v-card>
          </v-flex>
          <v-flex md4 class="px-2 mb-2 " @click="weekly">
            <v-card color="white" class="cursor">
              <v-card-title class="title card-title-bg" :class="{'card-title-selected white--text': toggleCard === 2}">
                <v-icon>event_note</v-icon>
                <span class="mx-2">周统计</span>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="subheading">
                <v-layout md12 wrap row class="left-border-red">
                  <v-flex md6>本周充值: {{topupRecord.thisWeek}} 元</v-flex>
                  <v-flex md6>上周充值: {{topupRecord.lastWeek}} 元</v-flex>
                  <v-flex md6>本周消费: {{consumeData.thisWeek}} 元</v-flex>
                  <v-flex md6>上周消费: {{consumeData.lastWeek}} 元</v-flex>
                </v-layout>
              </v-card-text>
            </v-card>
          </v-flex>
          <v-flex md4 class="px-2 mb-2" @click="monthly">
            <v-card color="white" class="cursor">
              <v-card-title class="title card-title-bg" :class="{'card-title-selected white--text': toggleCard === 3}">
                <v-icon>date_range</v-icon>
                <span class="mx-2">月统计</span>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="subheading">
                <v-layout md12 wrap row class="left-border-indigo">
                  <v-flex md6>本月充值: {{topupRecord.thisMonth}} 元</v-flex>
                  <v-flex md6>上月充值: {{topupRecord.lastMonth}} 元</v-flex>
                  <v-flex md6>本月消费: {{consumeData.thisMonth}} 元</v-flex>
                  <v-flex md6>上月消费: {{consumeData.lastMonth}} 元</v-flex>
                </v-layout>
              </v-card-text>
            </v-card>
          </v-flex>
        </v-layout>

      </v-flex>
      <v-flex md12 class="mt-1">
        <!-- 各项曲线图 -->
        <v-flex my-2>
          <div id="echart1" style="width: 1600px;height:260px;">
          </div>
        </v-flex>
        <v-flex my-2>
          <div id="echart2" style="width: 1600px;height:260px;">
          </div>
        </v-flex>

      </v-flex>
      <v-flex md12>
        <v-layout row wrap>
          <v-flex class="px-2 py-2" md6>
            <v-card color="white" height="100%">
              <v-card-title class="title card-title-bg">
                <v-icon>data_usage</v-icon>
                <span class="mx-2">{{allArpuTitle}}</span>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="title">
                <v-layout wrap row>
                  <v-spacer></v-spacer>
                  <v-flex md6 d-flex justify-end>
                    <span>
                      {{arpuTitle1}}
                    <span class="grey--text">$</span> {{arpu.thisDate}} 
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    </span>
                    <span>
                      {{arpuTitle2}}
                    <span class="grey--text">$</span> {{arpu.lastDate}}
                    </span>
                  </v-flex>
                  <v-flex md12>
                    <div id="echart5" style="width: 800px;height:340px;">
                    </div>
                  </v-flex>
                </v-layout>

              </v-card-text>
            </v-card>
          </v-flex>

          <v-flex md3 class="py-1 px-1 my-1">
            <v-card color="white">
              <v-card-title class="title card-title-bg">
                <v-icon>pie_chart</v-icon>
                <span class="mx-2">充值构成</span>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="subheading">
                <div id="echart3" style="width: 400px;height:370px;">
                </div>
              </v-card-text>
            </v-card>
          </v-flex>

          <v-flex md3 class="py-1 px-1 my-1">
            <v-card color="white">
              <v-card-title class="title card-title-bg">
                <v-icon>pie_chart</v-icon>
                <span class="mx-2">消耗构成</span>
              </v-card-title>
              <v-divider></v-divider>
              <v-card-text class="subheading">
                <div id="echart4" style="width: 400px;height:370px;">
                </div>
              </v-card-text>
            </v-card>
          </v-flex>

        </v-layout>
      </v-flex>

    </v-layout>
  </v-container>
</template>

<script>
import * as statistics from "../../api/statistics";
import { mapMutations } from "vuex";
import echarts from "echarts";
const GAME_NAME = {
  "1": "经典斗牛",
  "2": "斗公牛",
  "3": "红中麻将",
  "4": "点子牛",
  "5": "欢乐金花",
  "6": "三公",
  "7": "平江开船",
  "8": "跑得快",
  "10": "长沙麻将",
  "11": "平江扎鸟"
};
const TOPUP = {
  topup10: "10元",
  topup20: "20元",
  topup30: "30元",
  topup50: "50元",
  topup100: "100元",
  topup200: "200元"
};
const WEEK = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];

let formatter = (data, name) => {
  var total = 0;
  var target;
  for (var i = 0, l = data.length; i < l; i++) {
    total += data[i].value;
    if (data[i].name == name) {
      target = data[i].value;
    }
  }
  var arr = [
    "{a|" + name + "}",
    "{b|" + (target / total * 100).toFixed(2) + "%}"
  ];
  return arr.join("\n");
};

export default {
  data: () => ({
    tabs: null,
    showProgress: false,
    dialog: false,
    modal: false,
    modalText: "",
    arpuTitle1: "今日",
    arpuTitle2: "昨日",
    arpu: {
      thisDate: 0,
      lastDate: 0
    },
    toggleCard: 1,
    topupCard: "昨日充值类别构成",
    topupCos: {
      topup10: 0,
      topup20: 0,
      topup30: 0,
      topup50: 0,
      topup100: 0,
      topup200: 0,
      all: 1
    },
    usageCard: "昨日游戏消耗构成",
    usageCos: {
      "0": 1,
      "1": 0,
      "2": 0,
      "3": 0,
      "4": 0,
      "5": 0,
      "6": 0,
      "8": 0,
      "10": 0,
      "11": 0
    },
    gameArpuCard: "每日分类ARPU值(元)",
    consumeCos: {},
    allArpuTitle: "每日总ARPU值(元)",
    gameArpuList: {
      "0": 1,
      "1": 0,
      "2": 0,
      "3": 0,
      "4": 0,
      "5": 0,
      "6": 0,
      "8": 0,
      "10": 0,
      "11": 0
    },
    chart1: null,
    chart2: null,
    chart3: null,
    chart4: null,
    chart5: null,
    option1: null,
    option2: null,
    option3: null,
    option4: null,
    option5: null,
    topupRecord: {
      today: 0,
      yesterday: 0,
      thisWeek: 0,
      lastWeek: 0,
      thisMonth: 0,
      lastMonth: 0
    },
    consumeData: {
      today: 0,
      yesterday: 0,
      thisWeek: 0,
      lastWeek: 0,
      thisMonth: 0,
      lastMonth: 0
    }
  }),
  mounted() {
    // this.topupCos = this.topupConstitude.yesterday;
    this.chart1 = echarts.init(document.getElementById("echart1"));
    this.chart2 = echarts.init(document.getElementById("echart2"));
    this.chart3 = echarts.init(document.getElementById("echart3"));
    this.chart4 = echarts.init(document.getElementById("echart4"));
    this.chart5 = echarts.init(document.getElementById("echart5"));
    // ${p1.axisValueLabel} <br />
    let option1 = {
      title: {
        text: "日充值记录(元)",
        textStyle: {
          fontWeight: "normal",
          fontSize: "18"
        }
      },
      color: ["#f44336", "#009688"],
      grid: {
        left: "4%",
        right: "1%",
        top: "14%",
        bottom: "8%"
      },
      tooltip: {
        trigger: "axis",
        confine: true,
        formatter: function(params) {
          let p1 = params[0];
          if (params.length === 2) {
            let p2 = params[1];
            return ` ${p1.seriesName}-${p1.name}: ${p1.value[1]} <br />   ${
              p2.seriesName
            }-${p2.name}:${p2.value[1]}`;
          } else {
            return `${p1.seriesName}-${p1.name}: ${p1.value[1]}`;
          }
        },
        backgroundColor: "#333",
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
        axisPointer: {
          animation: false
        }
      },
      axisPointer: {
        animation: false
      },
      legend: {
        data: ["今日充值", "昨日充值"]
      },
      xAxis: {
        type: "time",
        minInterval: 1,
        splitNumber: 24,
        splitLine: {
          show: false
        },
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          formatter(params) {
            let h = new Date(params).getHours();
            h = h > 9 ? h : "0" + h;
            return `${h}:00`;
          }
        }
      },
      yAxis: {
        type: "value",
        boundaryGap: [0, "100%"],
        splitLine: {
          show: true
        },
        max: function(value) {
          return value.max + 100;
        }
      }
    };
    let option2 = {
      title: {
        text: "日消费记录(元)",
        textStyle: {
          fontWeight: "normal",
          fontSize: "18"
        }
      },
      color: ["#f44336", "#009688"],
      grid: {
        left: "4%",
        right: "1%",
        top: "14%",
        bottom: "8%"
      },
      tooltip: {
        trigger: "axis",
        confine: true,
        formatter: function(params) {
          let p1 = params[0];
          if (params.length === 2) {
            let p2 = params[1];
            return ` ${p1.seriesName}-${p1.name}: ${p1.value[1]} <br />   ${
              p2.seriesName
            }-${p2.name}:${p2.value[1]}`;
          } else {
            return `${p1.seriesName}-${p1.name}: ${p1.value[1]}`;
          }
        },
        backgroundColor: "#333",
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
        axisPointer: {
          animation: false
        }
      },
      axisPointer: {
        animation: false
      },
      legend: {
        data: ["今日消费", "昨日消费"]
      },
      xAxis: {
        type: "time",
        minInterval: 1,
        splitNumber: 24,
        splitLine: {
          show: false
        },
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          formatter(params) {
            let h = new Date(params).getHours();
            h = h > 9 ? h : "0" + h;
            return `${h}:00`;
          }
        }
      },
      yAxis: {
        type: "value",
        boundaryGap: [0, "100%"],
        splitLine: {
          show: true
        },
        max: function(value) {
          return value.max + 100;
        }
      }
    };
    let option3 = {
      color: [
        "#D32F2F",
        "#FFA000",
        "#FFEA00",
        "#1DE9B6",
        "#1565C0",
        "#0288D1",
        "#283593",
        "#512DA8",
        "#78909C",
        "#8E24AA",
        "#607d8b"
      ],
      tooltip: {
        trigger: "item",
        formatter: "{b} : {c} ({d}%)",
        backgroundColor: "#333",
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);"
      },
      legend: {
        orient: "horizontal",
        y: "bottom",
        itemWidth: 14,
        data: ["10元", "20元", "30元", "50元", "100元", "200元"],

        textStyle: {
          rich: {
            a: {
              fontSize: 14,
              verticalAlign: "top",
              align: "center",
              padding: [0, 0, 2, 0]
            },
            b: {
              fontSize: 12,
              align: "center",
              padding: [0, 4, 0, 0],
              lineHeight: 16
            }
          }
        }
      },
      series: [
        {
          type: "pie",
          radius: ["45%", "75%"],
          center: ["52%", "46%"],
          selectedMode: "single",
          label: {
            normal: {
              show: false
            }
          },
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          },
          data: [
            { value: 0, name: "10元" },
            { value: 0, name: "20元" },
            { value: 0, name: "30元" },
            { value: 0, name: "50元" },
            { value: 0, name: "100元" },
            { value: 0, name: "200元" }
            // { value: 256, name: "300元" },
          ]
        }
      ]
    };
    let option4 = {
      color: [
        "#D32F2F",
        "#FFA000",
        "#FFEA00",
        "#1DE9B6",
        "#1565C0",
        "#0288D1",
        "#283593",
        "#512DA8",
        "#78909C",
        "#8E24AA",
        "#607d8b"
      ],
      tooltip: {
        trigger: "item",
        formatter: "{b} : {c} ({d}%)",
        backgroundColor: "#333",
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);"
      },
      legend: {
        orient: "horizontal",
        y: "bottom",
        itemWidth: 14,

        data: [
          "经典斗牛",
          "斗公牛",
          "点子牛",
          "跑得快",
          "欢乐金花",
          "红中麻将",
          "平江扎鸟",
          "长沙麻将",
          "三公"
        ],

        textStyle: {
          rich: {
            a: {
              fontSize: 14,
              verticalAlign: "top",
              align: "center",
              padding: [0, 0, 2, 0]
            },
            b: {
              fontSize: 12,
              align: "center",
              padding: [0, 4, 0, 0],
              lineHeight: 16
            }
          }
        }
      },
      series: [
        {
          name: "游戏统计",
          type: "pie",
          radius: ["45%", "75%"],
          center: ["52%", "46%"],
          selectedMode: "single",
          label: {
            normal: {
              show: false
            }
          },
          labelLine: {
            normal: {
              length: 4,
              length2: 2
            }
          },

          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          },
          data: [
            { value: 0, name: "经典斗牛" },
            { value: 0, name: "斗公牛" },
            { value: 0, name: "点子牛" },
            { value: 0, name: "跑得快" },
            { value: 0, name: "欢乐金花" },
            { value: 0, name: "红中麻将" },
            { value: 0, name: "平江扎鸟" },
            { value: 0, name: "长沙麻将" },
            { value: 0, name: "三公" }
          ]
        }
      ]
    };
    let option5 = {
      color: ["#009688"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: [
            "经典斗牛",
            "斗公牛",
            "点子牛",
            "红中麻将",
            "欢乐金花",
            "三公",
            "跑得快",
            "长沙麻将",
            "平江扎鸟"
          ],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: "value"
        }
      ],
      series: [
        {
          name: "ARPU",
          type: "bar",
          barWidth: "40%",
          itemStyle: {
            normal: {
              barBorderRadius: [10, 10, 0, 0]
            }
          },
          label: {
            normal: {
              show: true,
              position: "outside",
              fontSize: 14
            }
          },
          data: [8, 8, 8, 8, 8, 8, 8, 8, 8]
        }
      ]
    };
    this.chart1.setOption(option1);
    this.chart2.setOption(option2);
    this.chart3.setOption(option3);
    this.chart4.setOption(option4);
    this.chart5.setOption(option5);

    this.getConsumeChartData();
    this.getConsumeData();
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.getConsumeChartData();
        this.getConsumeData();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.getConsumeChartData();
        this.getConsumeData();
      });
    });
  },
  watch: {
    // 监测路由参数变化
    $route(to, from) {
      console.log(to.params.gametype);
    }
  },
  methods: {
    ...mapMutations(["PROGRESS"]),
    // 按照echarts规则 四舍五入
    toFixed(num) {
      if ((num + "").match(/\./)) {
        var numArr = (num + "").split(".");
        if (numArr[1].length > 2) {
          var num2 = +numArr[1][2] > 5 ? +numArr[1][1] + 1 : +numArr[1][1];
          return +(numArr[0] + "." + numArr[1][0] + num2);
        } else {
          return num;
        }
      } else {
        return num;
      }
    },
    // 获取充值记录
    getConsumeChartData() {
      this.PROGRESS(true);
      statistics.getConsumeChartData.r(this.toggleCard).then(({ data }) => {
        let d = data.data;
        // console.log(JSON.stringify(d))
        if (data.result == 0) {
          this.arpu = d.arpu;
          this.usageCos = this.convertDataGame(d.usageConstitudeList);
          this.gameArpuList = this.convertDataGame(d.gameArpuList);
          this.topupCos = d.topupConstitude;
          let chart3Data = this.convertDataTopup(d.topupConstitude);
          let chart4Data = this.convertDataGamePie(d.usageConstitudeList);
          let chart5Data = this.convertDataGamePie(d.gameArpuList);
          console.log(JSON.stringify(chart5Data));
          console.log(JSON.stringify(d.gameArpuList));
          this.chart3.setOption({
            series: [
              {
                data: chart3Data
              }
            ]
          });
          this.chart4.setOption({
            series: [
              {
                data: chart4Data
              }
            ]
          });
          this.chart5.setOption({
            series: [
              {
                data: chart5Data
              }
            ]
          });
          if (this.toggleCard === 1) {
            this.chart1.setOption({
              title: {
                text: "日充值记录(元)"
              },
              legend: {
                data: ["今日充值", "昨日充值"]
              },
              series: [
                {
                  name: "今日充值",
                  type: "line",
                  hoverAnimation: false,
                  connectNulls: true,
                  symbolSize: 6,
                  smooth: true,
                  data: this.convertDataDay(d.chartData.thisList)
                },
                {
                  name: "昨日充值",
                  type: "line",
                  hoverAnimation: false,
                  connectNulls: true,
                  smooth: true,
                  symbolSize: 6,
                  data: this.convertDataDay(d.chartData.lastList)
                }
              ],
              tooltip: {
                formatter: function(params) {
                  let p1 = params[0];
                  if (params.length === 2) {
                    let p2 = params[1];
                    return ` ${p1.seriesName} - ${p1.name}: ${
                      p1.value[1]
                    } <br />   ${p2.seriesName} - ${p2.name}: ${p2.value[1]}`;
                  } else {
                    return `${p1.seriesName} - ${p1.name}: ${p1.value[1]}`;
                  }
                }
              },
              xAxis: {
                type: "time",
                minInterval: 1,
                splitNumber: 24,
                splitLine: {
                  show: false
                },
                axisLabel: {
                  formatter(params) {
                    let h = new Date(params).getHours();
                    h = h > 9 ? h : "0" + h;
                    return `${h}:00`;
                  }
                }
              }
            });
            this.chart2.setOption({
              title: {
                text: "日消费记录(元)"
              },
              legend: {
                data: ["今日消费", "昨日消费"]
              },
              series: [
                {
                  name: "今日消费",
                  type: "line",
                  hoverAnimation: false,
                  connectNulls: true,
                  symbolSize: 6,
                  smooth: true,
                  data: this.convertDataDay(d.consumChartData.thisList)
                },
                {
                  name: "昨日消费",
                  type: "line",
                  hoverAnimation: false,
                  connectNulls: true,
                  smooth: true,
                  symbolSize: 6,
                  data: this.convertDataDay(d.consumChartData.lastList)
                }
              ],
              tooltip: {
                formatter: function(params) {
                  let p1 = params[0];
                  if (params.length === 2) {
                    let p2 = params[1];
                    return ` ${p1.seriesName} - ${p1.name}: ${
                      p1.value[1]
                    } <br />   ${p2.seriesName} - ${p2.name}: ${p2.value[1]}`;
                  } else {
                    return `${p1.seriesName} - ${p1.name}: ${p1.value[1]}`;
                  }
                }
              },
              xAxis: {
                type: "time",
                minInterval: 1,
                splitNumber: 24,
                splitLine: {
                  show: false
                },
                axisLabel: {
                  formatter(params) {
                    let h = new Date(params).getHours();
                    h = h > 9 ? h : "0" + h;
                    return `${h}:00`;
                  }
                }
              }
            });
          } else if (this.toggleCard === 2) {
            this.chart1.setOption({
              title: {
                text: "周充值记录(元)"
              },
              legend: {
                data: ["本周充值", "上周充值"]
              },
              series: [
                {
                  name: "本周充值",
                  type: "line",
                  hoverAnimation: false,
                  connectNulls: true,
                  symbolSize: 6,
                  smooth: true,
                  data: this.convertDataWeek(d.chartData.thisList)
                },
                {
                  name: "上周充值",
                  type: "line",
                  hoverAnimation: false,
                  connectNulls: true,
                  smooth: true,
                  symbolSize: 6,
                  data: this.convertDataWeek(d.chartData.lastList)
                }
              ],
              tooltip: {
                formatter: function(params) {
                  let p1 = params[0];
                  if (params.length === 2) {
                    let p2 = params[1];
                    return ` ${p1.seriesName} - ${p1.name}: ${
                      p1.value
                    } <br />   ${p2.seriesName} - ${p2.name}: ${p2.value}`;
                  } else {
                    return `${p1.seriesName} - ${p1.name}: ${p1.value}`;
                  }
                }
              },
              xAxis: {
                type: "category",
                data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
              }
            });
            this.chart2.setOption({
              title: {
                text: "周消费记录(元)"
              },
              legend: {
                data: ["本周消费", "上周消费"]
              },
              series: [
                {
                  name: "本周消费",
                  type: "line",
                  hoverAnimation: false,
                  connectNulls: true,
                  symbolSize: 6,
                  smooth: true,
                  data: this.convertDataWeek(d.consumChartData.thisList)
                },
                {
                  name: "上周消费",
                  type: "line",
                  hoverAnimation: false,
                  connectNulls: true,
                  smooth: true,
                  symbolSize: 6,
                  data: this.convertDataWeek(d.consumChartData.lastList)
                }
              ],
              tooltip: {
                formatter: function(params) {
                  let p1 = params[0];
                  if (params.length === 2) {
                    let p2 = params[1];
                    return ` ${p1.seriesName} - ${p1.name}: ${
                      p1.value
                    } <br />   ${p2.seriesName} - ${p2.name}: ${p2.value}`;
                  } else {
                    return `${p1.seriesName} - ${p1.name}: ${p1.value}`;
                  }
                }
              },
              xAxis: {
                type: "category",
                data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
              }
            });
          } else {
            this.chart1.setOption({
              title: {
                text: "月充值记录(元)"
              },
              legend: {
                data: ["本月充值", "上月充值"]
              },
              series: [
                {
                  name: "本月充值",
                  type: "line",
                  hoverAnimation: false,
                  connectNulls: true,
                  symbolSize: 6,
                  smooth: true,
                  data: this.convertDataMonth(d.chartData.thisList)
                },
                {
                  name: "上月充值",
                  type: "line",
                  hoverAnimation: false,
                  connectNulls: true,
                  smooth: true,
                  symbolSize: 6,
                  data: this.convertDataMonth(d.chartData.lastList)
                }
              ],
              tooltip: {
                formatter: function(params) {
                  let p1 = params[0];
                  if (params.length === 2) {
                    let p2 = params[1];
                    return ` ${p1.seriesName} - ${p1.name}: ${
                      p1.value
                    } <br />   ${p2.seriesName} - ${p2.name}: ${p2.value}`;
                  } else {
                    return `${p1.seriesName} - ${p1.name}: ${p1.value}`;
                  }
                }
              },
              xAxis: {
                type: "category",
                data: (() => {
                  let d = [];
                  for (let i = 0; i < 31; i++) {
                    d.push(`${i + 1}号`);
                  }
                  return d;
                })()
              }
            });
            this.chart2.setOption({
              title: {
                text: "月消费记录(元)"
              },
              legend: {
                data: ["本月消费", "上月消费"]
              },
              series: [
                {
                  name: "本月消费",
                  type: "line",
                  hoverAnimation: false,
                  connectNulls: true,
                  symbolSize: 6,
                  smooth: true,
                  data: this.convertDataMonth(d.consumChartData.thisList)
                },
                {
                  name: "上月消费",
                  type: "line",
                  hoverAnimation: false,
                  connectNulls: true,
                  symbolSize: 6,
                  data: this.convertDataMonth(d.consumChartData.lastList)
                }
              ],
              tooltip: {
                formatter: function(params) {
                  let p1 = params[0];
                  if (params.length === 2) {
                    let p2 = params[1];
                    return ` ${p1.seriesName} - ${p1.name}: ${
                      p1.value
                    } <br />   ${p2.seriesName} - ${p2.name}: ${p2.value}`;
                  } else {
                    return `${p1.seriesName} - ${p1.name}: ${p1.value}`;
                  }
                }
              },
              xAxis: {
                type: "category",
                data: (() => {
                  let d = [];
                  for (let i = 0; i < 31; i++) {
                    d.push(`${i + 1}号`);
                  }
                  return d;
                })()
              }
            });
          }
        }

        this.PROGRESS(false);
      });
    },
    getConsumeData() {
      statistics.getConsumeData.r(this.toggleCard).then(({ data }) => {
        let d = data.data;
        console.error(d);
        if (data.result == 0) {
          this.topupRecord = d.topupRecord;
          this.consumeData = d.consumeData;
        } else {
        }
      });
    },
    // 转换chartData
    convertDataDay(data) {
      let chart = [],
        date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate();
      data.forEach((item, i) => {
        let h = item.hours,
          m = item.minutes,
          time = (h < 10 ? `0${h}` : h) + ":" + (m < 10 ? `0${m}` : m) + ":00";
        chart.push({
          name: time,
          value: [`${year}-${month}-${day} ${time}`, item.totalPrice]
        });
      });
      return chart;
    },
    // 转换chartData
    convertDataWeek(data) {
      var chart = [];
      data.forEach(function(item, index) {
        chart.push({
          name: WEEK[item.hours],
          value: item.totalPrice
        });
      });
      return chart;
    },
    // 转换chartData
    convertDataMonth(data) {
      var chart = [];
      data.forEach(function(item, index) {
        chart.push({
          name: `${item.hours}号`,
          value: item.totalPrice
        });
      });
      return chart;
    },
    // 转换游戏充值构成数据
    convertDataTopup(data) {
      var pie = [];
      _.forEach(data, (item, key) => {
        if (TOPUP[key]) {
          pie.push({
            name: TOPUP[key],
            value: item
          });
        }
      });
      return pie;
    },
    // 转换游戏消耗构成数据
    convertDataGamePie(data) {
      var pie = [];
      data.forEach(function(item) {
        if (GAME_NAME[item.gameId]) {
          pie.push({
            name: GAME_NAME[item.gameId],
            value: item.data
          });
        }
      });
      return pie;
    },
    convertDataGame(data) {
      var game = {};
      data.forEach(function(item) {
        game[item.gameId] = item.data;
      });
      return game;
    },
    initialize() {},
    roomDetails(item) {
      this.dialog = true;
    },
    deletePlayer(item) {
      this.modal = true;
      this.modalText = "确认移除该玩家吗?";
    },
    dismissRoom() {
      this.modal = true;
      this.modalText = "确认解散该房间吗?";
    },
    daily() {
      this.toggleCard = 1;
      this.getConsumeChartData();
      this.arpuTitle1 = "今日";
      this.arpuTitle2 = "昨日";
      this.topupCard = "昨日充值类别构成";
      this.usageCard = "昨日游戏消耗构成";
      this.gameArpuCard = "每日分类ARPU值(元)";
      this.allArpuTitle = "每日总ARPU值(元)";
      // this.chart2.setOption({
      //   title: {text: '昨日充值类别构成'}
      // })
      // this.chart3.setOption({
      //   title: {text: '每日分类ARPU值'}
      // })
      // this.chart4.setOption({
      //   title: {text: '昨日游戏消耗构成'}
      // })
    },
    weekly() {
      this.toggleCard = 2;
      this.getConsumeChartData();
      this.arpuTitle1 = "本周";
      this.arpuTitle2 = "上周";
      this.topupCard = "近七日充值类别构成";
      this.usageCard = "近七日游戏消耗构成";
      this.gameArpuCard = "每周分类ARPU值(元)";
      this.allArpuTitle = "每周总ARPU值(元)";
    },
    monthly() {
      this.toggleCard = 3;
      this.getConsumeChartData();
      this.arpuTitle1 = "本月";
      this.arpuTitle2 = "上月";
      this.topupCard = "近三十日充值类别构成";
      this.usageCard = "近三十日游戏消耗构成";
      this.gameArpuCard = "每月分类ARPU值(元)";
      this.allArpuTitle = "每月总ARPU值(元)";
    }
  }
};
</script>

<style lang="less" scoped>
.cursor:hover {
  cursor: pointer;
}
.theme--light .table thead tr:first-child {
  background: #f1f1f1;
}
</style>